<template>
  <div :class="className">
    <video
      class="video-cover"
      ref="videoPlayer"
      :muted="muted"
      :autoplay="true"
      :poster="poster"
      :controls="'controls'"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      playsinline="true"
      x5-video-player-type="h5"
      x5-video-orientation="h5"
      x5-video-player-fullscreen="true"
      preload="auto"
    ></video>
    <div class="cover" v-if="isCover" @click="try2play(m3u8)">
      <div class="btn btn-play">
        <i class="fa fa-play"></i>
      </div>
      <!-- {{ m3u8 }} -->
    </div>
  </div>
</template>
<script>
// webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
// x-webkit-airplay="true"  /*这个属性还不知道作用*/
// playsinline="true"  /*IOS微信浏览器支持小窗内播放*/
// x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
// x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
// x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
// preload="auto" /*这个属性规定页面加载完成后载入视频*/
import Hls from 'hls.js/dist/hls.min.js';
// https://github.com/video-dev/hls.js/blob/master/docs/API.md
import { bus } from '@/bus.js';
export default {
  name: 'Hls',
  props: {
    poster: {
      type: String,
      default: () => {
        return [];
      },
    },
    m3u8: {
      type: String,
    },
    rtmp: {
      type: String,
    },
    className: {
      type: Array,
      default: () => {
        return ['video-box', 'box-16b9'];
      },
    },
    options: {
      type: Object,
      default() {
        return {
          aspectRatio: '16:9',
          autoplay: false,
          muted: true,
          preload: 'auto',
          controls: true,
        };
      },
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      player: null,
      isCover: true,
      muted: true,
    };
  },
  methods: {
    try2play(urlVideo) {
      let tVue = this;
      this.isCover = false;
      let videoDom = this.$refs.videoPlayer;
      this.player.attachMedia(videoDom);
      this.player.loadSource(urlVideo);
      try {
        videoDom.play();
      } catch (err) {
        console.error(err);
      }
      this.muted = false;

      this.player.on(Hls.Events.ERROR, (e, data) => {
        if (data.fatal) {
          console.error(data.type);
          switch (data.type) {
            case Hls.ErrorTypes.NETWORK_ERROR:
              tVue.player.startLoad(); //尝试恢复网络错误。
              break;
            case Hls.ErrorTypes.MEDIA_ERROR:
              tVue.player.recoverMediaError(); //尝试恢复媒体错误。
              break;
            default:
              tVue.player.destroy();
              tVue.$emit('planB');
              break;
          }
          // tVue.$emit('planB');
        }
      }); //error事件，先尝试修复，后切换方案
      this.player.on(Hls.Events.MANIFEST_PARSED, (e, playVideo) => {
        console.log(e, playVideo);
        videoDom.play();
      });
    },
  },
  mounted: function() {
    let isSupported = Hls.isSupported();
    if (isSupported) {
      this.player = new Hls();
    } else {
      this.$emit('planB');
    }
    bus.$once('获得推流地址', (res) => {
      this.$nextTick(() => {
        this.try2play(res.videoLiveUrl);
      });
    });
  },

  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  }, //切换方案前尽量手动销毁组件
};
</script>

<style scoped lang="less">
.video-box {
  width: 100%;
  height: 100%;
}
.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  color: #fff;
  .btn {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0;
    right: 0;
    font-size: 12vw;
    width: 10vw;
    height: 14vw;
    margin: auto;
  }
}
</style>
